﻿<!DOCTYPE HTML>
<html>

<head>
   <title>读取并修改元素的内容</title>
   <meta charset="utf-8" />
   <style>
      div {
         float: left;
         height: 100px;
         line-height: 100px;
      }

      #d1,
      #d3 {
         background-color: #ccff00;
      }

      #d2 {
         cursor: pointer;
         background-color: #ffcc00;
      }
   </style>
</head>

<body>
   <div id="d1">树形列表</div>
   <div id="d2">&lt;&lt;</div>
   <div id="d3">内容的主体</div>
   <script>
      var d2 = document.getElementById("d2");
      d2.onclick = function () {
         console.log(d2 == this);

         var d1 = document.getElementById("d1");
         if (this.innerHTML == "&lt;&lt;") {
            this.innerHTML = "&gt;&gt;"
            d1.style.display = "none";
         } else {
            this.innerHTML = "&lt;&lt;"
            d1.style.display = "block";
         }
      }
   </script>
</body>

</html>